[iOSDC Japan 2019 リポート] 「めくるめくシェーダアートの世界」を聞いてワクワクした！

こんにちは。きんくまです。iOSDC Japan 2019に参加しています。

これまでのレポート

- [iOSDC Japan 2019 リポート]「実機の管理とおさらば！AWS Device FarmでiOSのテストをしよう！」を聞いてきた
- [iOSDC Japan 2019 リポート]「iOSアプリのリジェクトリスクを早期に発見するための取り組み」を聞いてきた

めくるめくシェーダアートの世界

発表：Youichi Takatsuさん @ta_ka_tsu

シェーダアートとは各ピクセルの座標値と共通のデータからそのピクセルの色を決定し、様々なイメージをスクリーン上に表現する手法のことです。時にシェーダ芸と呼ばれることもあります。 これは主にシェーダと呼ばれるGPUで実行されるプログラムを記述することで実現します。

様々な手法が編み出され、そのシンプルな原理とは裏腹に実に多彩な表現が可能となっています。

Web上にはシェーダを閲覧/投稿できるGLSL SandboxやShadertoyといったサイトがあり、多くの驚くべき作品を目にすることができます。

もちろんWebに限らずiOSでもシェーダアートは実現できます。

本セッションではまずシェーダアートの動作原理を解説します。 次にstep関数やfract関数といったシェーダ用の組み込み関数をいくつか学んだ後、距離場・極座標など表現方法のヒントとなる概念に加えて、複製・ノイズなどの基本的なテクニックも紹介します。

また、共通データに時間を渡すことでアニメーションを行ったり、加速度センサーやマイクの音量を渡すことでインタラクティブな表現ができるデモも披露します。 さらにレイトレーシングの一種であるレイマーチングを用いた3次元的な表現も紹介します。

普段のプログラミングとはまた一味違う体験を、そしてあなた独自の世界を表現してみませんか？

スライド

サンプルGithubリポジトリ

ta-ka-tsu/ShaderArtSamples

シェーダーアートとは？

シェーダー(Shader)を利用して絵を描いている

例）
- GLSL Sandbox
- Shadertoy

シェーダーとは？

3次元コンピュータグラフィックスにおいて、シェーディング（陰影処理）を行うコンピュータプログラムのこと。

3次元CGの描画の仕組み（超簡易版）

入力：頂点列
↓
== レンダリングパイプライン ==
↓
頂点処理 - プログラム記述 `頂点シェーダー`
↓
ラスタライズ - 固定処理
↓
フラグメント処理 - プログラム記述 `フラグメントシェーダー`
↓
==
↓
出力 -> 画像

iOSでの作り方

おそらく方法は2つ

• WebGL
• Metal -> 今回はMetalを使う

三角形を2つ描くだけなのでフラグメントシェーダー以外は割愛

実践MSL 基本編

• MSLのスカラー型/ベクトル型/行列型
• length, clamp, step, smoothstep, mix関数
• 座標変換と正規化
• 極座標の利用
• アニメーション <- 経過時間もCPUから渡す
• 複製
• 複製の識別
• 擬似乱数
• 色 - HSV色空間を使う
• 空間を歪める
• テクスチャ
• インタラクション

レイマーチング

編注）この項目は正直難しくてわかりませんでした、、なので、スライドをご参照ください

雨粒シェーダー解説

少しずつ手順を重ねることによって、複雑な雨粒エフェクトに変わっていきます。
最後にカメラ入力をテクスチャとすると本物のような雨粒になっていました。

参考

• The Book of Shaders
• The Art of Code

感想

OpenGL / WebGL / Metalは似た部分があって、以前WebGLをやってみたことがあります。その際に本に書いてあることはできたけど、この後どうやって勉強していっていいのかがわからず詰まってしまいました。

勉強の方法としてはスライドの通りに勉強していけば良いと思うのですが、Metal標準関数を知ることも必要だとわかりました。

今回は三角ポリゴン2枚を画面に並べただけで、Vertex Shaderは使わずにFragment Shaderのみでデモを行っていました。

ところが、デモでは非常に豊かな表現になっていてワクワクしました。

また、CPUでリアルタイムのカメラ映像やテクスチャ画像などを入力として準備して、それをShader側で受け取りGPUで計算できることもわかりました。

今回のセッションをもとに、いろいろと試してみようと思います！